﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link href="../Plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
    <link href="../zui/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="../zui/css/font-awesome.min.css" rel="stylesheet" />
    <link href="../zui/css/zui.min.css" rel="stylesheet" />
    <link href="../zui/lib/layer/skin/default/layer.css" rel="stylesheet" />
    <link href="../Plugins/pinyin/simple-input-method.css" rel="stylesheet" />
    <link href="../Plugins/sweetalert/sweetalert.css" rel="stylesheet" />
    <link href="../zui/lib/swiper/css/swiper.min.css" rel="stylesheet" />
    <link href="../zui/css/app.css" rel="stylesheet" />
    <title></title>
    <style type="text/css">
        .form-bg {
            padding: 2em 0;
        }

        .form-horizontal {
            background: #fff;
            border-radius: 0px;
            text-align: center;
            box-shadow: 2px 2px 5px #333333;
        }

            .form-horizontal .heading {
                display: block;
                font-size: 25px;
                font-weight: 300;
                padding: 25px 0;
                border-bottom: 1px solid #f0f0f0;
                margin-bottom: 20px;
            }

            .form-horizontal .form-group {
                padding: 0 40px;
                margin: 0 0 25px 0;
                position: relative;
            }

            .form-horizontal .form-control {
                background: #e0e0e0;
                border: none;
                border-radius: 20px;
                box-shadow: none;
                padding: 0 20px 0 45px;
                height: 40px;
                transition: all 0.3s ease 0s;
                height: 60px !important;
                line-height: 68px !important;
                font-size: 20px !important;
            }

                .form-horizontal .form-control:focus {
                    background: #808080;
                    box-shadow: none;
                    outline: 0 none;
                }

            .form-horizontal .form-group i {
                position: absolute;
                top: 25px;
                left: 60px;
                font-size: 17px;
                color: #c8c8c8;
                transition: all 0.5s ease 0s;
            }

            .form-horizontal .form-control:focus + i {
                color: #00b4ef;
            }

            .form-horizontal .fa-question-circle {
                display: inline-block;
                position: absolute;
                top: 12px;
                right: 60px;
                font-size: 20px;
                color: #808080;
                transition: all 0.5s ease 0s;
            }

                .form-horizontal .fa-question-circle:hover {
                    color: #000;
                }

            .form-horizontal .main-checkbox {
                float: left;
                width: 20px;
                height: 20px;
                background: #11a3fc;
                border-radius: 50%;
                position: relative;
                margin: 5px 0 0 5px;
                border: 1px solid #11a3fc;
            }

                .form-horizontal .main-checkbox label {
                    width: 20px;
                    height: 20px;
                    position: absolute;
                    top: 0;
                    left: 0;
                    cursor: pointer;
                }

                    .form-horizontal .main-checkbox label:after {
                        content: "";
                        width: 10px;
                        height: 5px;
                        position: absolute;
                        top: 5px;
                        left: 4px;
                        border: 3px solid #fff;
                        border-top: none;
                        border-right: none;
                        background: transparent;
                        opacity: 0;
                        -webkit-transform: rotate(-45deg);
                        transform: rotate(-45deg);
                    }

                .form-horizontal .main-checkbox input[type=checkbox] {
                    visibility: hidden;
                }

                    .form-horizontal .main-checkbox input[type=checkbox]:checked + label:after {
                        opacity: 1;
                    }

            .form-horizontal .text {
                float: left;
                margin-left: 7px;
                line-height: 20px;
                padding-top: 5px;
                text-transform: capitalize;
            }

            .form-horizontal .btn {
                float: right;
                font-size: 14px;
                color: #fff;
                background: #00b4ef;
                border-radius: 3px;
                /*padding: 25px 25px;*/
                border: none;
                text-transform: capitalize;
                width: 500px;
                height: 60px !important;
                transition: all 0.5s ease 0s;
                margin-bottom: 50px
            }

        @media only screen and (max-width: 479px) {
            .form-horizontal .form-group {
                padding: 0 25px;
            }

                .form-horizontal .form-group i {
                    left: 45px;
                }

            .form-horizontal .btn {
                padding: 10px 20px;
            }
        }

        .menu-box {
            padding-left: 0px !important;
        }

            .menu-box li {
                height: 130px;
                list-style: none;
                margin-bottom: 10px;
                border-color: #ccc7c7;
                border-width: 1px;
                border-style: solid;
                background-color: #FFF;
                cursor: pointer;
                border-radius: 5px;
                padding: 35px 20px;
            }

        .dropdown-menu li {
            font-size: 15px !important;
            line-height: 100px !important;
        }

        #simle_input_method {
            z-index: 9999999999;
        }

        .search-device {
            padding-top: 25px;
            width: 600px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 40px;
            border: 2px solid #e0e0e0;
            background-color: #FFF
        }

        .devicebox-list {
            padding-top: 10px;
            width: 500px;
            margin-left: auto;
            margin-right: auto;
            height: 300px
        }

            .devicebox-list .device-info {
                width: 90%;
                margin-left: auto;
                margin-right: auto;
                height: 60px;
                line-height: 60px;
                font-size: 16px;
                font-weight: bolder;
                text-indent: 10px;
                color: #FFF;
                margin-top: 3px;
                background-color: #3280fc;
                border-radius: 6px;
                cursor: pointer;
            }

        .device-info button {
            height: 100%;
            font-size: 16px;
            font-weight: bolder;
        }

        .hide {
            display: none;
        }
        #webcam img {
            width: 1024px !important;
            height: 600px !important;
        }
         .sweetAlertStyle{
            margin-top: -135px !important;
        }
    </style>
</head>
<body style="background-image:url(../static/images/bg.png)">
    <div id="videoDisplay" style="width:1024px;height:600px;background-color:#FFF;border:2px solid double;z-index:9999999!important;position:absolute;display:none">
        <div id="webcam" style="width:1024px;height:600px"></div>
    </div>
    <div class="mheader">
        <div class="mtitle"><span class="label label-success" id="deviceID" style="position:absolute;top:2px;left:1px;font-size:15px;display:none">设备ID:b8:27:eb:90:07:d3</span><span class="mainspan">挥发性实验仪</span></div>
    </div>
    <div class="mcontent">

        <div id="mainContent">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide swiper-no-swiping">
                        <div class="container" style="margin-top:20px">
                            <form class="form-horizontal" style="width:580px !important;margin-left:178px">
                                <span class="heading">身份验证</span>
                                <div class="form-group">
                                    <input type="text" class="form-control numkeyboard" id="txtUserName" value="admin" placeholder="账号">
                                    <i class="fa fa-user"></i>
                                </div>
                                <div class="form-group help">
                                    <input type="password" class="form-control numkeyboard" id="txtUserPwd" value="admin" placeholder="密码">
                                    <i class="fa fa-lock"></i>

                                </div>
                                <div class="form-group">
                                    <button type="button" class="btn btn-default btn-login" style="font-size:16px !important">立即登录</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="swiper-slide swiper-no-swiping">


                        <div class="container">
                            <div class="row">
                                <div class="col-xs-4"><i id="menu-title" class="fa fa-home" style="font-size:18px;line-height:30px;font-weight:bold"> 功能菜单</i><!--<button class="btn btn-info btn-lg" id="home-btn" type="button">功能菜单</button>--></div>
                                <div class="col-xs-4">

                                </div>
                                <div class="col-xs-4">
                                    <div class="dropdown" style="float:right">
                                        <button class="btn btn-warning" id="userinfo-btn" type="button" data-toggle="dropdown" style="width:180px !important; height: 38px;"><span id="userTitle">管理员-李新波</span> <span class="caret"></span></button>
                                        <ul class="dropdown-menu">
                                            <!--<li><a href="###" style="line-height:35px !important">个人信息</a></li>-->
                                            <li><a href="javascript:void(0)" id="ChangePassword" style="line-height:35px !important">修改密码</a></li>
                                            <li><a href="javascript:void(0)" id="logout" style="line-height:35px !important">注销登录</a></li>
                                            <li><a href="javascript:void(0)" id="btnCloseForm" style="line-height:35px !important">关闭程序</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <hr style="border-color:#58CFFF" />
                            <div id="loading" style="width:100%;height:100%;display:none;text-align:center;line-height:400px;font-size:20px"><b>正在进行装载...</b></div>
                            <iframe frameborder="0" id="content-frame" allowtransparency="true" width="100%" style="height:400px !important;" scrolling="no" src="Menu.html"></iframe>

                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="mfooter">
        <span style="color:#f1a325;position:absolute;left:10px" id="display-time"></span>
        <span style="color:#f1a325;position:absolute;right:10px" id="closeForm">杭州唐研科技有限公司</span>
    </div>
    <script src="../zui/lib/jquery/jquery.js"></script>
    <script src="../Plugins/jquery-ui/jquery-ui.min.js"></script>
    <script src="../Plugins/sweetalert/sweetalert.min.js"></script>
    <script src="../zui/lib/layer/layer.js"></script>
    <script src="../zui/lib/swiper/js/swiper.min.js"></script>
    <script src="../zui/js/utils.js"></script>
    <script src="../zui/js/app.js"></script>
    <script src="../zui/js/zui.js"></script>
    <script type="text/javascript">
        var swiper;
        sessionStorage.CurrentIP = '127.0.0.1';
        sessionStorage.CurrentHttpAddress = "http://127.0.0.1:9000";
        $(function () {

            createImageLayer("192.168.0.102:8080");
            //$(".mtitle").mousemove(function (e) {
            //    var el = e.srcElement || e.target;
            //    if ($(el).attr("move") != "false") {
            //        sysControl.MoveForm();
            //    }
            //});
            $(document).click(function () {
                $("#videoDisplay").hide();
            });

            sessionStorage.syIndex = 0;
            swiper = new Swiper('.swiper-container', {
                mousewheel: false,
                noSwiping: true,
                on: {
                    slideChangeTransitionStart: function () {
                        if (this.activeIndex == 1) {
                        }
                    },
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                    renderBullet: function (index, className) {

                        var dname;
                        switch (index) {

                            case 0:
                                dname = "状态";
                                break;
                            case 1:
                                dname = "设置";
                                break;

                            default:
                        }

                        return '<span class="' + className + '" move="false">' + dname + '</span>';
                    },
                },

            });
            $(".close-ui i").click(function () {

                layer.confirm(
                    "您确定结束程序么！</span>",
                    { btn: ['是的，我确认！', '不小心点错了'], icon: 0, shade:0.01, title: '操作确认', closeBtn: 0, move: false },
                    function (index) {
                        layer.close(index);
                        sysControl.CloseForm();
                    },
                    function () {

                    }
                );
            });
            //$("#closeForm").click(function () {
            //    sysControl.CloseForm();
            //});
            //$("#home-btn").click(function () {

            //    $("#content-frame").attr("src", "Menu.html");

            //});

            $(".btn-login").click(function () {

                var loadingIndex = layer.msg("正在验证身份...", {
                    time: 0, icon: 16, shade: 0.01
                });
                $.get(sessionStorage.CurrentHttpAddress + "/userLogin", { userName: $("#txtUserName").val().trim(), userPwd: $("#txtUserPwd").val().trim() }, function (res) {

                    var obj = JSON.parse(res);
                    if (obj.status == 0) {
                        layer.close(loadingIndex);
                        swal({
                            title: '验证失败',
                            text: obj.message,
                            type: 'error',
                            customClass: 'sweetAlertStyle'
                        })
                    }
                    else {

                        sessionStorage.LoginUser = JSON.stringify(obj.data);
                        $("#userTitle").text((obj.data.user_role == 1 ? "管理员" : "普通用户") + "-" + obj.data.real_name);
                        $("#content-frame").attr("src", "Menu.html");
                        layer.close(loadingIndex);
                        swiper.slideNext();
                        HeadAnimation(".mtitle .mainspan", "titleReduce", "68px");
                    }

                });

            });
            $("#ChangePassword").click(function () {

                $("#content-frame").attr("src", "ChangePwd.html");

            });
            $("#logout").click(function () {

                swiper.slidePrev();
                HeadAnimation(".mtitle .mainspan", "titleEnlarge", "100px");
            })
            $("#btnCloseForm").click(function () {

                layer.confirm(
                    "您确定结束程序么！</span>",
                    { btn: ['是的，我确认！', '不小心点错了'], icon: 0, shade:0.01, title: '操作确认', closeBtn: 0, move: false },
                    function (index) {
                        layer.close(index);
                        sysControl.CloseForm();
                    },
                    function () {

                    }
                );
            });
            $("#content-frame").load(function () {
                $("#loading").hide();
                $(this).show();
            });
            setInterval(function () {
                $("#display-time").text(new Date().format("yyyy年MM月dd日 hh点mm分ss秒"));
            }, 1000);



        });
        function setFlagTrue() {

            $("#content-frame").contents().find(".content-frame").contents().find("#bh").text("实验温度");
        }
        function setTemp(temp) {

            $("#content-frame")[0].contentWindow.setTemp(temp);
        }
        function setTemp1(temp) {
            //$("#content-frame").contents().find(".content-frame").eq(sessionStorage.syIndex - 1)[0].contentWindow.setTemp1(temp);
        }
        function stopFlow() {
            $("#content-frame").contents().find(".content-frame").eq(sessionStorage.syIndex - 1)[0].contentWindow.completion();
        }

        function addTerminal(status, ip, macAddress) {
            var deviceInfoStr = "";
            if (status == "0") {
                var val = status + "|" + ip + "|" + macAddress;
                deviceInfoStr = $('<div class="device-info"><button class="btn btn-block btn-success" mac=' + macAddress + '  val=' + val + ' data-toggle="tooltip" data-placement="right" title="点击连接设备" type="button">设备ID:' + macAddress + '</button></div>');
            }
            else {
                deviceInfoStr = $('<div class="device-info"><button class="btn btn-block btn-warning disabled" type="button">设备ID:' + macAddress + '-正在使用</button></div>');
            }
            $(deviceInfoStr).find(".btn").click(function () {

                var obj = $(this).attr("val").split('|');
                sessionStorage.CurrentIP = obj[1];
                sessionStorage.CurrentMacAddress = obj[2];
                sessionStorage.CurrentHttpAddress = "http://" + '12' + ":5555";
                //AjaxGet("正在连接设备...", "init", null, function (res) {

                //});
                var loadingIndex = 0;
                //setInterval(function () {
                //    AjaxGet("", "com", null, function (res) {
                //        layer.close(loadingIndex);
                //    }, function (res) {
                //        loadingIndex = layer.msg('与设备通信中断！', {
                //            time: 0, icon: 0, shade: 0.6
                //        });
                //    });
                //}, 1000);
                swiper.slideNext();
                myService.InitCamera(obj[1], function (res) {

                });
                $("#deviceID").text("设备ID:" + sessionStorage.CurrentMacAddress).show();
                //alert(sessionStorage.CurrentMacAddress);
            })
            $(".devicebox-list").append(deviceInfoStr);

        }
        function updateSearchProgress(value) {
            $("#search-progress").css("width", value + "%");
            if (value == 100) {
                $("#search-status").text("搜索完成");
            }
            else {
                $("#search-status").text("正在搜索局域网设备...(" + value + "%)");
            }

        }
        // 摄像头显示脚本
        var imageNr = 0; // Serial number of current image
        var finished = new Array(); // References to img objects which have finished downloading
        var paused = false;
        var videoIp;
        function createImageLayer(ip) {
            videoIp = ip;
            var img = new Image();
            img.style.position = "absolute";
            img.style.zIndex = -1;
            img.onload = imageOnload;
            img.onclick = imageOnclick;
            img.src = "http://" + ip + "/?action=snapshot&n=" + (++imageNr);
            var webcam = document.getElementById("webcam");
            webcam.insertBefore(img, webcam.firstChild);
        }

        // Two layers are always present (except at the very beginning), to avoid flicker
        function imageOnload() {
            this.style.zIndex = imageNr; // Image finished, bring to front!
            while (1 < finished.length) {
                var del = finished.shift(); // Delete old image(s) from document
                del.parentNode.removeChild(del);
            }
            finished.push(this);
            if (!paused) createImageLayer(videoIp);
        }

        function imageOnclick() { // Clicking on the image will pause the stream
            paused = !paused;
            if (!paused) createImageLayer(videoIp);
        }
    </script>
</body>
</html>